<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>消息盒子</title>

  <script src="../static/kaige/js/szload.js"></script>
  <style>
    .layim-msgbox {
      margin: 15px;
    }

    .layim-msgbox li {
      position: relative;
      margin-bottom: 10px;
      padding: 0 130px 10px 60px;
      padding-bottom: 10px;
      line-height: 22px;
      border-bottom: 1px dotted #e2e2e2;
    }

    .layim-msgbox .layim-msgbox-tips {
      margin: 0;
      padding: 10px 0;
      border: none;
      text-align: center;
      color: #999;
    }

    .layim-msgbox .layim-msgbox-system {
      padding: 0 10px 10px 10px;
    }

    .layim-msgbox li p span {
      padding-left: 5px;
      color: #999;
    }

    .layim-msgbox li p em {
      font-style: normal;
      color: #FF5722;
    }

    .layim-msgbox-avatar {
      position: absolute;
      left: 0;
      top: 0;
      width: 50px;
      height: 50px;
    }

    .layim-msgbox-user {
      padding-top: 5px;
    }

    .layim-msgbox-content {
      margin-top: 3px;
    }

    .layim-msgbox .layui-btn-small {
      padding: 0 15px;
      margin-left: 5px;
    }

    .layim-msgbox-btn {
      position: absolute;
      right: 0;
      top: 12px;
      color: #999;
    }
  </style>
</head>

<body>

  <ul class="layim-msgbox" id="LAY_view"></ul>
  <script>
    load_init_js(function () {
      layui.config({
        layimPath: szoapcpath + '/static/kaige/layuiextend/layim/' //配置 layim.js 所在目录
        , layimAssetsPath: szoapcpath + '/static/layim-assets/' //layim 资源文件所在目录
      }).extend({
        layim: layui.cache.layimPath + 'layim' //配置 layim 组件所在的路径
      }).use(['layim', 'flow'], function () {
        var layim = layui.layim
          , layer = layui.layer
          , laytpl = layui.laytpl
          , $ = layui.jquery
          , flow = layui.flow;

        //请求消息
        var renderMsg = function (page, callback) {
          $.ajax({
            url: '/im.chat/msgbox',
            data: { page: page || 1, limit: 20 },
            success: function (res) {
              if (res.code != 0) {
                return layer.msg(res.msg);
              }
              callback && callback(res.data, res.pages);
            }
          });
        };

        //消息信息流
        flow.load({
          elem: '#LAY_view' //流加载容器
          , isAuto: false
          , end: '<li class="layim-msgbox-tips">暂无更多新消息</li>'
          , done: function (page, next) { //加载下一页
            renderMsg(page, function (data, pages) {
              var html = laytpl($("#LAY_tpl").html()).render({
                data: data
                , page: page
              });
              next(html, page < pages);
            });
          }
        });

      });
    });
  </script>
  <script type="text/html" id="LAY_tpl">
    {{# layui.each(d.data, function(index, item){ }}
      <li class="layim-msgbox-system">
        <p><span class="layui-badge layui-bg-blue">{{ item.msg_type }}</span> <a href="javascript:;" onclick="parent.openview({'id':'flowopenview','url':'{{ item.url }}','icon':'fa fa-sitemap','title':'流程处理'})">{{ item.content }}</a> <span>{{ item.time }}</span> <span class="layui-badge {{ item.status==2?'layui-bg-green':'layui-bg-red' }}">{{ item.status==2?'已读':'未读' }}</span></p>
      </li>
  {{# }); }}
  </script>
</body>

</html>